<template>
    <div style="margin-bottom:50px">
        <v-toolbar flat color="primary">
           <!-- 上部标题栏 -->
           <v-btn icon flat>
                <v-icon color="white" medium @click="goBack()">keyboard_arrow_left</v-icon>
           </v-btn>
           <v-toolbar-title style="margin-left:0">
               <span style="color:white">商品详情</span>
           </v-toolbar-title>
            <v-btn icon flat style="position:absolute;margin-right:16px;right:0px;margin-top:0">
                <v-icon color="white" medium>mail_outline</v-icon>
            </v-btn>         
        </v-toolbar>
        <v-container>
        <v-layout row wrap>
            <!-- 用户信息栏 -->
            <v-flex xs2>
                <v-avatar slot="activator" size="80px">
                    <img src="http://img1.3lian.com/2015/w1/76/d/81.jpg">
                </v-avatar>
            </v-flex>
            <v-flex xs5>
                <h3><strong>我是用户</strong><v-icon>person</v-icon></h3>
                <p style="color:gray;font-size:12px;margin-top:10px">发布于2天前</p>
            </v-flex>
            <v-flex xs4>
                <h3 style="margin-left:30%;margin-top:25%">￥{{commodity.goodsPrice}}</h3>
            </v-flex>
        </v-layout>

        <!-- 商品详情 -->
        <v-layout wrap>
            <p style="margin-right:2%">{{commodity.goodsName}}</p>
            <p style="margin-right:2%">{{commodity.goodsDetail}}</p>
            <v-flex xs12 v-for="(pic,index) in commodity.attachments" :key="`pics-${index}`">
                <img :src="pic.attachmentUrl" style="width:100%">
            </v-flex>
            <v-flex xs1>
                <v-icon color="gray">place</v-icon>
            </v-flex>
            <v-flex xs9>
                <p style="color:gray;font-size:15px">国际软件学院小区</p>
            </v-flex>
        </v-layout>
        </v-container>
    
        <div style="height:50px;width:100%;bottom:0px;position:fixed">
            <v-layout row id="layout">
                <v-flex xs6 text-xs-center id="collect">
                    <!-- 用if  未收藏就显示空心五角星-->
                    <v-btn v-show="!hasCollected" flat large icon color="primary" @click="collect()">
                        <v-icon large id="star">star_border</v-icon>
                    </v-btn>      

                    <!-- 用if  收藏就显示实心五角星-->
                    <v-btn v-show="hasCollected" flat large icon color="primary" @click="cancelCollect()">
                        <v-icon large id="star">star</v-icon>
                    </v-btn>              
                </v-flex>
                 <v-flex xs6 text-xs-center id="chat">
                   
                    <v-btn flat large icon color="white">
                        <v-icon large id="chat">chat</v-icon>
                    </v-btn>                   
                </v-flex>
            </v-layout>   
        </div>

    </div>      
</template>

<script>


export default {

    name:'commodity-details',

    data(){
        return{
            commodity:{

                attachments:[],
                goodsName:'',
                goodsPrice:'',
                goodsDetail:'',
                collect:false,

            },

            hasCollected:false,
        }
    },

    methods:{

        getGoodsDetail(){
            this.$axios({
                method:'get',
                url:this.SERVER+'/goods/'+this.$route.params.commodityID,
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer '+localStorage.getItem('Access-Token')
                }
            }).then(response=>{
                    var res=response['data']['data']
                    console.log(res)
                    this.commodity.goodsName=res['goodsName']
                    this.commodity.goodsPrice=res['goodsPrice']
                    this.commodity.goodsDetail=res['goodsDetail']
                    this.commodity.attachments=res['attachments']
                    this.commodity.collect=res['collect']
                    this.hasCollected=this.commodity.collect;
                    
                }
            ),response=>({
                function(response){
                    console.log(response)
                }
            })
        },

        collect(){

            var formdata=new FormData();
            formdata.append("goodsId",this.$route.params.commodityID)
            this.$axios.post('/goods/collects',formData,{
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':''
                }
            }).then(response=>{
                    console.log(response);
                    this.hasCollected=true;
                }
            ),response=>({
                function(response){
                    console.log(response)
                }
            })
        },

        cancelCollect(){
            this.$axios({
                method:'delete',
                url:this.SERVER+'/goods/collects/'+this.$route.params.commodityID,
                headers:{
                    'Content-Type':'multipart/form-data',
                    'Authorization':'bearer '+localStorage.getItem('Access-Token')
                }
            }).then(response=>{
                    console.log(response);
                    this.hasCollected=false;
                }
            ),response=>({
                function(response){
                    console.log(response)
                }
            })
        },

        goBack(){
            this.$router.back(-1);
        }
    },

    mounted(){
        this.getGoodsDetail();
    }
}
</script>

<style scoped>

.flex.xs2{
    margin-left:0px;
    margin-top:5%;
}

.flex.xs4{
    margin-top:8%;
}

.flex.xs5{
    margin-left:8%;
    margin-top:8%;
}

#collect{
    background-color:#E0E0E0;
}

#chat{
    background-color: #4caf50;
}

#layout{
    margin-left:0
}

#star{
    margin-bottom:10px
}

#chat{
    margin-bottom:10px
}
</style>

